<template>
    <div class="page-container page-customerManage">
        <div class="company-manager">
            <div class="operations">
                <div class="search-user">
                    <el-input v-model="searchKey" class="search-input" placeholder="企业名称" style="width: 200px;"></el-input>
                    <el-input v-model="name" class="search-input" placeholder="管理员名称" style="width: 200px;"></el-input>
                    <el-input v-model="phone" class="search-input" placeholder="管理员电话" style="width: 200px;"></el-input>
                    <div class="search-btn" @click="getCompanyVideo">查询</div>
                </div>
            </div>
            <el-table :data="companyList" border tooltip-effect="dark" style="width: 100%;">
                <el-table-column label="编号" align="center" width="60">
                    <template slot-scope="scope">
                        <div>{{ scope.row.companyId }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="companyName" align="center" label="企业名称">
                </el-table-column>
                <el-table-column align="center" label="短视频开关">
                    <template slot-scope="scope">
                        <el-switch @change="switchVideoClick(scope.row)" v-model="scope.row.stateSwitch" active-text="打开"
                            inactive-text="关闭">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="videoSize" align="center" label="可上传视频数量" width="150">
                </el-table-column>
                <el-table-column prop="name" align="center" label="管理员名称">
                </el-table-column>
                <el-table-column prop="phone" align="center" label="联系电话" width="120">
                </el-table-column>
                <el-table-column align="center" label="操作" width="65">
                    <template slot-scope="scope">
                        <el-button class="el-button checkCard el-button--text el-button--medium"
                            style="color: rgb(81, 205, 203);" @click="editVideoSize(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-sizes="[10]"
                :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="编辑" :modal-append-to-body="false" width="20%" :append-to-body="true" :modal="false" :rules="rules"
            ref="form" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="视频限制数量" prop="videoSize">
                    <el-input v-model="form.videoSize"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button class="btncss" @click="updateSize">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getCompanyVideoList, switchVideoFun, updateSize, switchQywx } from '@/api/api.js';
import { serverUrl } from "@/utils/server.js";
export default {
    data() {
        return {
            total: 0,
            pageNum: 1,
            dialogFormVisible: false,
            switchVideo: false,
            searchKey: '',
            name: '',
            phone: '',
            companyList: [],
            rules: {
                videoSize: [
                    { required: true, message: '请输入视频限制数量', trigger: 'blur' },
                    { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
                ],
            },
            form: {
                videoSize: '',
                companyId: ''
            }
        };
    },
    created() {
        this.getCompanyVideo();
    },
    methods: {
        editVideoSize(row) {
            this.form = row;
            this.dialogFormVisible = true;
        },
        updateSize() {
            let params = this.form;
            updateSize(params).then(res => {
                if (res.code === 200) {
                    this.$message({
                        message: '操作成功',
                        type: 'sussess'
                    });
                    this.dialogFormVisible = false;
                    setTimeout(() => {
                        this.getCompanyList();
                    }, 200)
                }
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: 'warning'
                });
            })
        },
        getCompanyVideo() {
            let params = {
                pageNum: this.pageNum,
                companyName: this.searchKey,
                name: this.name,
                phone: this.phone
            }
            getCompanyVideoList(params).then(res => {
                if (res.code == 200) {
                    this.total = res.data.pageInfo.total;
                    this.companyList = res.data.pageInfo.list;
                } else {
                    this.companyList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.companyList = [];
            })
        },
        switchWeChatClick(row) {
            if (serverUrl.baseURL.indexOf("/test/") == -1) {
                let params = {
                    switchQywx: row.qywxSwitch,
                    companyId: row.companyId
                }
                switchQywx(params).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: '操作成功',
                            type: 'sussess'
                        });
                        setTimeout(() => {
                            this.getCompanyList();
                        }, 200)
                    }
                }).catch(err => {
                    this.$message({
                        message: err.message,
                        type: 'warning'
                    });
                })
            }
        },
        switchVideoClick(row) {
            if (serverUrl.baseURL.indexOf("/test/") == -1) {
                let params = {
                    switchVideo: row.stateSwitch,
                    companyId: row.companyId
                }
                switchVideoFun(params).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            message: '操作成功',
                            type: 'sussess'
                        });
                        setTimeout(() => {
                            this.getCompanyList();
                        }, 200)
                    }
                }).catch(err => {
                    this.$message({
                        message: err.message,
                        type: 'warning'
                    });
                })
            }
        },
        handleCurrentChange() {
            this.getCompanyVideo()
        },
    }
}
</script>
<style lang="scss">
.page-customerManage {
    background: #fff;
    min-height: calc(100vh - 150px);
    position: relative;
    .page {
        padding: 10px 0;
        text-align: center;
    }
    .company-manager {
        padding: 0 20px;
        .operations {
            display: flex;
            justify-content: space-between;
            height: 60px;
            align-items: center;
            .operation-btns {
                display: flex;
                div {
                    border-radius: 4px;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 40px;
                    height: 40px;
                    color: #fff;
                    padding: 0 20px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                .disabled {
                    background: #B9EBEA;
                }
            }
            .search-user {
                display: flex;
                .search-input {
                    height: 40px;
                    margin-right: 10px;
                    .el-input__inner {
                        height: 40px;
                    }
                }
                .search-btn {
                    border-radius: 4px;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 40px;
                    height: 40px;
                    color: #fff;
                    padding: 0 20px;
                    cursor: pointer;
                }
                .disabled {
                    background: #B9EBEA;
                }
            }
        }
    }
}
</style>
